<script setup>

import LightCard from "@/components/LightCard.vue";
import {Calendar, CollectionTag, EditPen, Link} from "@element-plus/icons-vue";
import Weather from "@/components/Weather.vue";
import {computed, reactive, ref} from "vue";
import {get} from "@/net";
import TopicEditer from "@/components/TopicEditer.vue";

const weather = reactive({
  location: {},
  now: {},
  hourly: [],
  success: false,
})
const editor = ref(false)
const today = computed(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 加 1 并确保至少两位数字（例如 "01" 表示一月）
  const day = String(now.getDate()).padStart(2, '0'); // 获取当前日期并确保至少两位数字（例如 "07" 表示7日）
  return `${year}年 ${month}月${day}日`;
});

navigator.geolocation.getCurrentPosition(position => {
  const longitude = position.coords.longitude;
  const latitude = position.coords.latitude;
  get(`/api/forum/weather?latitude=${latitude}&longitude=${longitude}`, (data) => {
    Object.assign(weather, data);
    weather.success = true;
  })
}, (err) => {
  console.log(err);
  ElMessage.warning('位置信息获取错误，请检查网络设置');
  get("/api/forum/weather?latitude=39.92&longitude=116.46", (data) => {
    Object.assign(weather, data);
    weather.success = true;
  })
}, {
  timeout: 3000,
  enableHighAccuracy: true,
})

</script>

<template>
  <div style="display: flex; margin: 20px auto;gap:20px ;max-width: 900px">
    <div style="flex: 1">
      <light-card>
        <div class="create-topic" @click="editor = true">
          <el-icon>
            <EditPen/>
          </el-icon>
          点击新建主题...
        </div>
      </light-card>
      <light-card style="height: 30px">

      </light-card>
      <div style="margin-top: 10px;display: flex;flex-direction: column;gap:10px">
        <light-card style="height: 150px" v-for="item in 10">

        </light-card>
      </div>
    </div>
    <div style="width: 300px">
      <div style="position: sticky;top: 20px">
        <light-card>
          <div style="font-weight: bold">
            <el-icon>
              <CollectionTag/>
            </el-icon>
            论坛公告
          </div>
          <el-divider style="margin: 10px 0"/>
          <div style="font-size: 14px;color: grey">
            亲爱的的论坛成员，
            感谢您选择加入我们的社区。我们很高兴与您分享最新的论坛动态和重要信息。
            感谢您对论坛的支持与关注，让我们共同努力，打造一个友好、安全、有价值的交流平台。
            祝您使用愉快！
            日期：[2024-04-28]
          </div>
        </light-card>
        <light-card style="margin-top: 10px">
          <div style="font-weight: bold">
            <el-icon>
              <Calendar/>
            </el-icon>
            天气信息
          </div>
          <el-divider style="margin: 0 0"/>
          <weather :data="weather"/>
        </light-card>
        <light-card>
          <div style="display: flex;justify-content: space-between;color: gray;font-size: 14px">
            <div>当前时间：</div>
            <div>{{ today }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;color: gray;font-size: 14px">
            <div>当前IP</div>
            <div>127.0.0.1</div>
          </div>
        </light-card>
        <div style="font-size: 14px ;margin-top: 10px;color: gray">
          <el-icon>
            <Link/>
          </el-icon>
          友情链接：
          <el-divider style="margin: 10px 0"/>
        </div>
        <div style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 10px; margin-top: 10px">
          <div class="friend-link">
            <el-image src="https://blog.shenjianl.cn/aisi-coding/logo.svg" style="width: 100%;height: 50px"/>
          </div>
          <div class="friend-link">
            <el-image src="https://blog.shenjianl.cn/aisi-coding/logo.svg" style="width: 100%;height: 50px"/>
          </div>
          <div class="friend-link">
            <el-image src="https://blog.shenjianl.cn/aisi-coding/logo.svg" style="width: 100%;height: 50px"/>
          </div>
          <div class="friend-link">
            <el-image src="https://blog.shenjianl.cn/aisi-coding/logo.svg" style="width: 100%;height: 50px"/>
          </div>
        </div>
      </div>
    </div>
    <topic-editer :show="editor" @close="editor = false"/>
  </div>
</template>

<style scoped lang="less">
.friend-link {
  border-radius: 5px;
  overflow: hidden;
}

.create-topic {
  background-color: #efefef;
  border-radius: 5px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  padding: 0 10px;
  margin: 10px;
  color: gray;

  &:hover {
    cursor: pointer;
  }
}
</style>